<template>
	<view class="content" :class="{ active: active }">
		<!-- icon -->
		<image class="content-icon" :src="icon" mode="aspectFit"></image>
		<!-- name -->
		<view class="content-name" :class="{ active: active }">
			{{ name }}
		</view>
	</view>
</template>

<script setup>
defineProps({
	active: Boolean,
	name: { type: String, default: '周一' },
	icon: { type: String, default: '../../static/icons/weeks_1.png' },
});
</script>

<style scoped>
.content {
	width: 150rpx;
	height: 150rpx;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background-color: #f8f8f8;
}

.content-icon {
	width: 80rpx;
	height: 80rpx;
}

.content-name {
	font-size: 14px;
	color: #9a9a9a;
}

.active {
	font-weight: bold;
	/* color: black; */
	color: #ec5b7d;
	background-color: #fff;
}
</style>
